﻿@theme: "../refs/";

@import "@{theme}variables.less";
@import "@{theme}mixins.less";

ul.as-selections {
    font-size: 13px;
    list-style: none;
    margin: 0;
    padding: 0;

    .search-bar-input {
        height: 32px;
    }

    &.loading {
        background-color: #eee;
    }

    li {
        float: left;
        margin: 0 4px 1px 0;

        &.as-selection-item {
            display: none;
            color: #2b3840;
            font-size: 13px;
            font-family: "Lucida Grande", arial, sans-serif;
            text-shadow: 0 1px 1px #fff;
            background-color: #ddeefe;
            background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddeefe), to(#bfe0f1));
            border: 1px solid #acc3ec;
            border-top-color: #c0d9e9;
            padding: 2px 7px 2px 10px;
            .box-shadow(0 1px 1px #e4edf2);

            &:last-child {
                margin-left: 30px;
            }

            a.as-close {
                float: right;
                margin: 1px 0 0 7px;
                padding: 0 2px;
                cursor: pointer;
                color: #5491be;
                font-family: "Helvetica", helvetica, arial, sans-serif;
                font-size: 14px;
                font-weight: bold;
                text-shadow: 0 1px 1px #fff;
                -webkit-transition: color .1s ease-in;
            }

            &.blur {
                color: #666666;
                background-color: #f4f4f4;
                background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f4f4f4), to(#d5d5d5));
                border-color: #bbb;
                border-top-color: #ccc;
                .box-shadow(0 1px 1px #e9e9e9);

                a.as-close {
                    color: #999;
                }
            }

            &:hover {
                color: #2b3840;
                background-color: #bbd4f1;
                background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbd4f1), to(#a3c2e5));
                border-color: #6da0e0;
                border-top-color: #8bb7ed;

                a.as-close {
                    color: #4d70b0;
                }
            }

            &.selected {
                border-color: #1f30e4;
            }

            a:hover.as-close {
                color: #1b3c65;
            }

            a:active.as-close {
                color: #4d70b0;
            }
        }
    }
}

html > body ul.as-selections {
    li {
        float: left;
        margin: 0 4px 0 0;

        &.as-original {
            margin-left: 0;
        }
    }
}

div.as-results {
    position: absolute;
    z-index: 850;
    left: -2px;
    top: 35px;
}
.as-original{
    width: 100%;
}
ul.as-list {
    list-style: none;
    margin: 0;
    padding: 0;
    .box-shadow(5px 2px 10px rgba(0,0,0,0.4));
    background-color: #fff;
    border: 1px solid @brand-primary;
    margin-left: -1px;
}

li.as-result-item, li.as-message {
    margin: 0;
    line-height: 1.3em;
    padding: 5px 12px;
    background-color: transparent;
    border-bottom: 1px solid #efefef;
    cursor: pointer;

    &:last-child {
        border-bottom: 0;
    }
}

li.as-result-item:first-child {
    margin: 0;
}

li.as-message {
    margin: 0;
    cursor: default;
}

li.as-result-item.active {
    background-color: @brand-primary;
    /*background-image: -webkit-gradient(linear, 0% 0%, 0% 64%, from(rgb(110, 129, 245)), to(rgb(62, 82, 242)));
    border-color: #3342e8;*/
    color: #fff;
}

li.as-result-item em {
    font-style: normal;
    background: #444;
    padding: 0 2px;
    color: #fff;
}

li.as-result-item.active em {
    background: #253f7a;
    color: #fff;
}

/* Webkit Hacks  */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    ul.as-selections {
        border-top-width: 2px;
    }

    ul.as-selections li.as-selection-item {
        padding-top: 3px;
        padding-bottom: 3px;
        /*disable selection item*/
        display: none;
    }

    ul.as-selections li.as-selection-item a.as-close {
        margin-top: -1px;
    }

    ul.as-selections li.as-original input {
        /*height: 19px;*/
    }
}

/* Opera Hacks  */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
    ul.as-list {
        border: 1px solid @brand-primary;
    }

    ul.as-selections li.as-selection-item a.as-close {
        margin-left: 4px;
        margin-top: 0;
    }
}
